<template>
  <div class="index">
    <head-text titleText="爬虫记录"></head-text>
    <div class="list-content">
       <div class="filter-area">
        <Search :searchData="searchData" :searchItem="searchItem"></Search>
      </div>
      <div class="table-title">
        <span></span>
        <h5>爬虫记录</h5>
      </div>
      <custom-table
        :tableData="tableData"
        :tableListData="tableListData"
        :tableBtn="[]"
        :currentData="currentData"
        @onPageChange="onPageChange"
        @onSizeChange="onSizeChange"
      ></custom-table>
    </div>
  </div>
</template>

<script>
import customTable from "@c/table";
import headText from "@c/headText";
import Search from "@c/search";
import { getDetailReptileRecordListApi } from "@s/api";
import {
  REPTILESTATUS,
  REPTILESTEP,
  REPTILESTATUSArray
} from "@u/wordbook";
export default {
  name: "index",
  data() {
    return {
      nowPage: 1,
      limit: 10,
       searchItem: [],
      currentData: {},
      reptileStatus:REPTILESTATUSArray,
        searchData: {
          /** 关键词 */
          keywords: '',
          /** 栏目名 */
          channelName:'',
      },
      dialogObj: {
        id: "",
        view: false,
        title: "",
        show: false,
        form: {}
      },
      tableData: []
    };
  },
  components: {
    headText,
    Search,
    customTable
  },
  created() {
    this.searchItem = [
      {
        type: "input",
        label: "关键词：",
        prop: "keywords",
        placeholder: "请输入",
      },
      {
        type: "input",
        label: "栏目名称",
        prop: "channelName",
        placeholder: "请输入",
      },
       {
        type: "select",
        label: "状态",
        prop: "status",
        placeholder: "请选择",
        selectList: this.reptileStatus
      },
    ];
    //  table表格
    this.tableListData = [
      { width: "50", label: "", type: "index" },
      { prop: "channelName", width: "", label: "栏目名称" },
      { prop: "status", width: "", label: "状态",type:'wordbook' ,wordbookList:this.getReptileStatus},
      { prop: "step", width: "", label: "当前步骤",type:'wordbook' ,wordbookList:this.getReptileStep },
      { prop: "count", width: "", label: "入库条数" },
      { prop: "result", width: "", label: "失败原因" },
      { prop: "keywords", width: "", label: "关键词" },
      { prop: "startTime", width: "",type:'date', label: "开始时间" },
      { prop: "endTime", width: "",type:'date', label: "结束时间" },
    ];
  },
  mounted() {
    this.getList();
  },
  methods: {
    onPageChange(val) {
      this.nowPage = val;
      this.getList();
    },
    onSizeChange(val) {
      this.nowPage = 1;
      this.limit = val;
      this.getList();
    },
    //获取栏目列表
    getList() {
      let json = JSON.parse(JSON.stringify(this.searchData));
      json.pageSize = this.limit
      json.pageNo =this.nowPage
      getDetailReptileRecordListApi(json).then(res => {
        this.currentData.total = res.total;
        this.tableData = res.list;
      });
    },
     // 搜索事件
    getDataList(val) {
      this.searchData = val;
      this.nowPage = 1;
      this.limit = 10;
      this.$nextTick(() => {
        this.getList();
      });
    },
     getReptileStatus(val) {
      return REPTILESTATUS[val];
    },
      getReptileStep(val) {
      return REPTILESTEP[val];
    },
  
    handleView(v) {
      this.dialogObj.id = v.id;
      this.dialogObj.form = v;
      this.dialogObj.view = false; // 编辑
      this.dialogObj.title = "编辑栏目";
      this.dialogObj.show = true;
    }
  }
};
</script>
<style scoped lang="scss"></style>
